import React, { Component } from 'react';
import { messages } from "share/common";
import { Badge, Button, Tabs, Spin } from "antd";
import Info from "components/info";
import SlideFrame from "components/slide-frame";
import AutoCheckDetail from "../detail";
import DimMatchSetting from "./dim-match-setting"
import PreciseMatchSetting from "./precise-match-setting"
import autoCheckService from "../auto-check-receipt.service";
import "styles/finance-setting/auto-check-receipt/auto-check-receipt-setting.scss"

const { TabPane } = Tabs;

class AutoCheckReceiptSetting extends Component {

  state = {
    loading: false,
    info: {}
  };

  componentDidMount() {
    this.getInfo();
  }

  getInfo = () => {
    const { configId } = this.props.params;
    this.setState({ loading: true });
    autoCheckService.getConfigDetail(configId).then(res => {
      this.setState({ info: res.data || {} })
    }).finally(() => {
      this.setState({ loading: false });
    })
  };

  infoAttributes = [{
    title: messages('common.column.status')/*状态*/,
    dataIndex: 'enabled',
    render: value => (
      <Badge
        status={value ? 'success' : 'error'}
        text={value ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}
      />
    )
  }, {
    title: messages('expense-14.key312')/*层级*/,
    dataIndex: 'levelCode',
    render: value => value === 'COMPANY' ?
      messages('expense-14.key320')/*公司*/ :
      messages('expense-14.key321')/*租户*/
  }, {
    title: messages('expense-14.key307')/*所属组织*/,
    dataIndex: 'levelOrgName'
  }, {
    title: messages('expense-14.key310')/*启用公司*/,
    dataIndex: 'distLevelOrgName'
  }];

  handleEdit = () => {
    const { info } = this.state;
    SlideFrame.open({
      title: messages('expense-14.key488')/*智能收票管理*/,
      content: AutoCheckDetail,
      afterClose: refresh => refresh && this.getInfo(),
      params: {
        record: info
      }
    }, this)
  };

  handleTabChange = key => {

  };

  handleNewRule = () => {};

  renderInfo = (title, content) => {
    return (
      <div style={{ color: '#999' }}>
        {title}：{content}
      </div>
    )
  };

  render() {
    const { loading, info } = this.state;
    return (
      <div className="auto-check-receipt-setting">
        <Spin spinning={loading}>
        <Info
          paragraph
          attributes={[{title: messages('expense-14.key384')/*说明*/, dataIndex: 'explain', span: 24, widthFix: false}]}
          dataSource={{explain: messages('expense-14.key489')/*您可以在此页面设置智能收票规则。*/}}
        />
        <Info
          title={messages('expense-14.key490')/*基础设置*/}
          className="auto-check-receipt-setting-info"
          attributes={this.infoAttributes}
          dataSource={info}
          children={<Button type='primary' onClick={this.handleEdit}>{messages('common.edit')/*编辑*/}</Button>}
        />
        <Tabs
          defaultActiveKey="precise-match"
          className="auto-check-receipt-setting-tabs"
          onChange={this.handleTabChange}
        >
          <TabPane tab={messages('expense-14.key491')/*精确匹配*/} key="precise-match">
            <PreciseMatchSetting detail={info.exactMatchConfigItem || {}}/>
          </TabPane>
          <TabPane tab={messages('expense-14.key484')/*模糊匹配*/} key="dim-match">
            <DimMatchSetting
              readOnly={info.readOnly}
              configId={info.receiptCheckConfigId || this.props.params.configId}
            />
          </TabPane>
        </Tabs>
        </Spin>
        <div className="bottom-bar">
          <Button onClick={() => window.history.go(-1)}>{messages('common.back')/*返回*/}</Button>
        </div>
      </div>
    )
  }
}

export default AutoCheckReceiptSetting;
